// Node.js的核心模块，专门用来处理文件路径
const path = require("path")
// eslint 插件需要引入
const ESlintPlugin = require("eslint-webpack-plugin")
// html
const HtmlPlugin = require("html-webpack-plugin")
module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: undefined, // path.resolve(__dirname, "dist") 开发模式没有输出
    // filename: 输出文件名
    filename: "static/js/main.js",
    // 每次打包先清空dist文件目录下的东西
    clean: true
  },
  // 加载器
  module: {
    rules: [
      {
        oneOf: [
          {
            // 每个文件都只需要匹配一次，匹配中了则不需要查找后面的loader
            oneOf: [
              // babel
              {
                test: /\.js$/,
                exclude: /node_modules/, // 排除node_modules代码不编译
                loader: "babel-loader",
                //可以在这里设置，也可以另外新建文件设置
                options: {
                  plugins: ["@babel/plugin-transform-runtime"] // 减少代码体积
                }
              },
              // css
              {
                // 用来匹配 .css 结尾的文件
                test: /\.css$/,
                // use 数组里面 Loader 执行顺序是从右到左
                use: ["style-loader", "css-loader"]
              },
              {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
              },
              {
                test: /\.s[ac]ss$/,
                use: ["style-loader", "css-loader", "sass-loader"]
              },
              {
                test: /\.styl$/,
                use: ["style-loader", "css-loader", "stylus-loader"]
              },
              {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset", //识别这个标识就会处理base64
                parser: {
                  dataUrlCondition: {
                    maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                  }
                },
                generator: {
                  // 将图片文件输出到 static/imgs 目录中
                  // 将图片文件命名 [hash:8][ext][query]
                  // [hash:8]: hash值取8位
                  // [ext]: 使用之前的文件扩展名
                  // [query]: 添加之前的query参数
                  filename: "static/images/[hash:8][ext][query]"
                }
              },
              {
                test: /\.(ttf|woff2?|mp4|avi)$/,
                type: "asset/resource", //加上resource就不会压缩
                generator: {
                  filename: "static/media/[hash:8][ext][query]"
                }
              }
            ]
          }
        ]
      }
    ]
  },
  // 插件
  plugins: [
    // eslint
    // 指定检查文件的根目录
    new ESlintPlugin({
      context: path.resolve(__dirname, "../src")
    }),
    new HtmlPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html")
    })
  ],
  // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    // 不能处理js。js需要单独配置，但是vue和react在内部给配置好了。只能处理css，html等文件
    hot: true // 开启HMR功能（只能用于开发环境，生产环境不需要了）(true)
  },
  // 模式
  mode: "development", // 开发模式
  // 打包编译速度快，只包含行映射，没有列映射
  devtool: "cheap-module-source-map"
  // optimization: {
  //   // 代码分割配置
  //   splitChunks: {
  //     chunks: "all" // 对所有模块都进行分割
  //     // 以下是默认值
  //     // minSize: 20000, // 分割代码最小的大小
  //     // minRemainingSize: 0, // 类似于minSize，最后确保提取的文件大小不能为0
  //     // minChunks: 1, // 至少被引用的次数，满足条件才会代码分割
  //     // maxAsyncRequests: 30, // 按需加载时并行加载的文件的最大数量
  //     // maxInitialRequests: 30, // 入口js文件最大并行请求数量
  //     // enforceSizeThreshold: 50000, // 超过50kb一定会单独打包（此时会忽略minRemainingSize、maxAsyncRequests、maxInitialRequests）
  //     // cacheGroups: { // 组，哪些模块要打包到一个组
  //     //   defaultVendors: { // 组名
  //     //     test: /[\\/]node_modules[\\/]/, // 需要打包到一起的模块
  //     //     priority: -10, // 权重（越大越高）
  //     //     reuseExistingChunk: true, // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
  //     //   },
  //     //   default: { // 其他没有写的配置会使用上面的默认值
  //     //     minChunks: 2, // 这里的minChunks权重更大
  //     //     priority: -20,
  //     //     reuseExistingChunk: true,
  //     //   },
  //     // },
  //     // 修改配置
  //     // cacheGroups: {
  //     // 组，哪些模块要打包到一个组
  //     // defaultVendors: { // 组名
  //     //   test: /[\\/]node_modules[\\/]/, // 需要打包到一起的模块
  //     //   priority: -10, // 权重（越大越高）
  //     //   reuseExistingChunk: true, // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
  //     // },
  //     // default: {
  //     //   // 其他没有写的配置会使用上面的默认值
  //     //   minSize: 0, // 我们定义的文件体积太小了，所以要改打包的最小文件体积
  //     //   minChunks: 2,
  //     //   priority: -20,
  //     //   reuseExistingChunk: true
  //     // }
  //     // }
  //   }
  // }
}
